<template>
  <div class="leads">
    <div class="serBox">
      <el-form
        ref="formRef"
        :inline="true"
        :model="filterData"
        class="_filter"
        label-position="right"
        :class="spreadShow ? 'packUp' : 'unfold'"
      >
        <div class="screening">
          <el-form-item label="注册时间" prop="endDate">
            <el-date-picker
              size="small"
              v-model="filterData.endDate"
              type="daterange"
              :clearable="true"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="介绍人老师" prop="teacher_id">
            <el-select
              size="small"
              v-model.trim="filterData.teacher_id"
              placeholder="请选择介绍人老师"
              filterable
            >
              <el-option
                v-for="(item, index) in teachers"
                :key="index"
                :label="item.name"
                :value="item.employee_id"
              >
                <span>{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
            v-show="spreadShow ? false : true"
          >
            <el-input
              size="small"
              v-model.trim="filterData.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
        </div>
        <el-row>
          <el-button size="small" class="_but" @click="resetForm(formRef)"
            >重 置</el-button
          >
          <el-button type="primary" size="small" class="_but" @click="inquire"
            >查 询</el-button
          >
          <div
            class="_but operation"
            @click="spreadShow = !spreadShow"
            v-if="true"
          >
            展开
            <el-icon v-if="spreadShow">
              <arrow-down />
            </el-icon>
            <el-icon v-else>
              <arrow-up />
            </el-icon>
          </div>
        </el-row>
      </el-form>
      <div style="clear: both" v-if="!spreadShow"></div>
    </div>
    <div class="tableConter">
      <div class="download">
        <span @click="download">
          <el-icon> <download /> </el-icon>下载
        </span>
      </div>
      <el-table class="tableBox" :data="tableData" v-loading="loading">
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column label="微信昵称">
          <template #default="scope">
            <span>{{ scope.row.nickname ? scope.row.nickname : "--" }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="注册时间"
          prop="created_at"
          width="200"
        ></el-table-column>
        <el-table-column label="活动">
          <span>作品分享</span>
        </el-table-column>
        <el-table-column
          label="介绍人手机号"
          prop="inviter_phone"
          width="200"
        ></el-table-column>

        <el-table-column label="介绍人班级" width="300" class-name="classes">
          <template #default="scope">
            <span v-for="(item, idx) in scope.row.inviter_classes" :key="idx">{{
              item
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="介绍人老师" class-name="teachers" width="300">
          <template #default="scope">
            <span
              v-for="(item, idx) in scope.row.inviter_teachers"
              :key="idx"
              >{{ item }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="备注" width="300" class-name="teachers">
          <template #default="scope">
            <span v-for="(item, idx) in scope.row.remarks" :key="idx">
              {{ item.remark }}
              <em>{{ item.created_at }}</em>
            </span>
            <el-button
              type="primary"
              size="small"
              @click="add(scope.row.remarks, scope.row.id)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="laypage"
        v-model:page-size="pageSize"
        layout="prev, pager, next, total,slot"
        :total="Number(tableCount)"
        v-model:currentPage="currentPage"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="添加备注" width="40%">
      <el-input
        v-model="textarea"
        :rows="2"
        type="textarea"
        placeholder="请填写备注..."
      />
      <el-row class="btns">
        <el-button @click="cancelDialog">清空</el-button>
        <el-button type="primary" @click="sureDialog">确定</el-button>
      </el-row>
      <div class="remarks">
        <div v-for="(item, idx) in remarks" :key="idx">
          <p>
            <span>{{ userName }}</span>
            <em>{{ item.created_at }}</em>
          </p>
          <p>{{ item.remark }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { toRefs, getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  name: "Leads",
  setup() {
    const proxy = getCurrentInstance().appContext.config.globalProperties;
    const router = useRouter();
    const formRef = ref(null);
    let dataObj = reactive({
      filterData: {
        //搜索条件表单
        endDate: "",
        teacher_id: "",
        phone: "",
      },
      spreadShow: false, //是否伸缩筛选条件
      currentPage: 1,
      loading: false,
      tableCount: null,
      pageSize: 10,
      tableData: [], //表单数据
      teachers: [], //老师下拉框
      dialogVisible: false,
      textarea: "", //添加备注input
      remarks: [], //目前备注数组
      id: null, //当前input
      userName: window.localStorage.getItem("userName"),
    });
    /**
     * 表格数据
     */
    let assignmentData = () => {
      dataObj.loading = true;
      let parmes = {
        phone: dataObj.filterData.phone,
        teacher_id: dataObj.filterData.teacher_id,
        create_time_s: dataObj.filterData.endDate
          ? dataObj.filterData.endDate[0]
          : null,
        create_time_e: dataObj.filterData.endDate
          ? dataObj.filterData.endDate[1]
          : null,
        page: dataObj.currentPage,
      };
      // router.currentRoute.value.query.a;
      if (router.currentRoute.value.query.teacher_id) {
        parmes = {
          teacher_id: router.currentRoute.value.query.teacher_id,
        };
      }
      proxy.$https
        .get("/api/v1/invitations", parmes)
        .then((res) => {
          dataObj.loading = false;
          if (!res.code) {
            dataObj.tableData = res.data.data ? res.data.data : [];
            dataObj.tableCount = res.data.total;
          } else {
            dataObj.tableData = [];
            dataObj.tableCount = 0;
          }
        })
        .catch(() => {
          dataObj.tableData = [];
          dataObj.tableCount = 0;
          dataObj.loading = false;
        });
    };
    /**
     * 查询
     */
    let inquire = () => {
      dataObj.currentPage = 1;
      assignmentData();
    };
    /**
     * 重置搜索条件
     */
    let resetForm = (formRef) => {
      if (!formRef) return;
      formRef.resetFields();
      assignmentData();
    };

    /**
     * 页码change
     */
    let pageChange = (index) => {
      dataObj.currentPage = index;
      assignmentData();
    };
    /**
     * 获取老师下拉列表
     */
    let getTeachers = () => {
      proxy.$https.get("/api/v1/employees").then((res) => {
        if (!res.code) {
          dataObj.teachers = res.data;
        } else {
          dataObj.teachers = [];
        }
      });
    };
    /**
     * 文件下载
     */
    let download = () => {
      let parmes = {
        phone: dataObj.filterData.phone,
        teacher_id: dataObj.filterData.teacher_id,
        create_time_s: dataObj.filterData.endDate
          ? dataObj.filterData.endDate[0]
          : "",
        create_time_e: dataObj.filterData.endDate
          ? dataObj.filterData.endDate[1]
          : "",
        page: dataObj.currentPage,
        token: window.localStorage.getItem("access_token"),
      };
      var parmesStr = "";
      for (let k in parmes) {
        parmesStr += `${k}=${parmes[k]}&`;
      }
      window.location.href = `/api/v1/invitation/export?${parmesStr}`;
    };
    let add = (remarks, id) => {
      dataObj.dialogVisible = true;
      dataObj.remarks = remarks;
      dataObj.id = id;
    };
    let cancelDialog = () => {
      // dataObj.dialogVisible = false;
      dataObj.textarea = "";
    };
    let sureDialog = () => {
      if (dataObj.textarea) {
        proxy.$https
          .post("/api/v1/invitation/remarks", {
            invitation_id: dataObj.id,
            remark: dataObj.textarea,
          })
          .then((res) => {
            if (!res.code) {
              ElMessage({
                message: res.msg,
                type: "success",
                duration: 2000,
              });
              dataObj.dialogVisible = false;
              assignmentData();
              dataObj.textarea = "";
            } else {
              ElMessage({
                message: res.msg,
                type: "warning",
              });
            }
          });
      } else {
        ElMessage({
          message: "请填写备注",
          type: "warning",
        });
      }
    };
    getTeachers();
    assignmentData();
    return {
      ...toRefs(dataObj),
      formRef: formRef,
      resetForm: resetForm,
      inquire: inquire,
      pageChange: pageChange,
      download: download,
      add: add,
      cancelDialog: cancelDialog,
      sureDialog: sureDialog,
    };
  },
};
</script>
<style scoped lang="scss">
.leads {
  width: 100%;
  height: 100%;
  background: #f7f9fa;
  padding: 20px;
  box-sizing: border-box;
  .serBox {
    width: 100%;
    padding-bottom: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
  }
  .tableConter {
    clear: both;
    height: auto;
    background: #ffffff;
    padding: 20px 24px;
    .download {
      width: 100%;
      height: 40px;
      align-items: center;
      display: flex;
      justify-content: flex-end;
      color: #88a3f1;
      span {
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          font-size: 18px !important;
          margin-right: 5px;
        }
      }
    }
  }
  .el-dialog {
    .btns {
      margin: 20px 0;
    }
    .remarks {
      border-top: solid 1px #dae8f0;
      div {
        margin: 10px 0;
        p {
          color: #666;
          font-size: 16px;
          margin: 3px 0;
          span {
            font-weight: 600;
          }
          em {
            font-style: normal;
            color: #88a3f1;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
<style  lang="scss">
.classes,
.teachers {
  .cell {
    display: flex;
    flex-direction: column;
    .el-button {
      width: 50px;
      height: 25px;
      margin-top: 5px;
    }
    span {
      em {
        font-style: normal;
        color: #88a3f1;
        margin-left: 5px;
      }
    }
  }
}
</style>